<template>
  <ele-page flex-table>
    <ele-card flex-table :body-style="{ padding: '0px', overflow: 'hidden' }">
      <ele-split-panel
        flex-table
        size="500px"
        allow-collapse
        :custom-style="{ borderWidth: '0 1px 0 0', padding: '0' }"
        :body-style="{ padding: '16px 16px 0 0', overflow: 'hidden' }"
        :style="{ height: '100%', overflow: 'visible' }"
      >
        <div style="padding: 16px 16px">
          <report-type-tree @clickNode="clickNode"> </report-type-tree>
        </div>
        <template #body>
          <div style="padding-bottom: 40px">
            <report-table :typeId="typeId"></report-table>
          </div>
        </template>
      </ele-split-panel>
    </ele-card>
  </ele-page>
</template>

<script setup>
  import { ref } from 'vue';
  import { pageTypes } from '@/api/manage/jimu/reportType';
  import {
    PlusOutlined,
    DeleteOutlined,
    EditOutlined
  } from '@/components/icons';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import ReportSearch from './components/report-search.vue';
  import ReportTable from './components/report-table.vue';
  import ReportTypeTree from './components/report-type-tree.vue';
  import ReportTypeSearch from './components/report-type-search.vue';

  const typeId = ref(0);

  const clickNode = (data) => {
    typeId.value = data.id;
  };
</script>
